<template>
	<view class="add">
		<view class="title">
			<input
				type="text"
				v-model="artObj.title"
				placeholder="请输入完整的标题"
				placeholder-class="placeholderClass"
			>
		</view>
		<view class="content">
			<editor
				class="myEdit"
				placeholder="写点什么吧~~"
				show-img-size
				show-img-toolbar
				show-img-resize
				@ready="onEditReady"
				@focus="onFocus"
				@statuschange="onStatusChange"
			></editor>
		</view>
		<view class="btnGroup">
			<u-button
				type="primary"
				text="确认发表"
				@click="onSubmit"
				:disabled="!artObj.title.length"
			></u-button>
		</view>
		<view class="tools" v-if="toolShow">
			<!-- 大标题 -->
			<view class="item" @click="clickHead">
				<text class="iconfont icon-zitibiaoti" :class="headShow ? 'active': ''"></text>
			</view>
			<!-- 加粗 -->
			<view class="item" @click="clickBold">
				<text class="iconfont icon-zitijiacu" :class="boldShow ? 'active': ''"></text> 
			</view>
			<!-- 倾斜 -->
			<view class="item" @click="clickItalic">
				<text class="iconfont icon-zitixieti" :class="italicShow ? 'active' : ''"></text> 
			</view>
			<!-- 分割线 -->
			<view class="item" @click="clickDivider">
				<text class="iconfont icon-fengexian"></text>
			</view>
			<!-- 上传图片 -->
			<view class="item" @click="clickInsertImage">
				<text class="iconfont icon-tupiantianjia"></text>
			</view>
			<!-- 提交 -->
			<view class="item" @click="addOk">
				<text class="iconfont icon-duigou"></text>
			</view>
		</view>
	</view>
</template>

<script>
	import {getImgSrc,getProvince} from "@/utils/tools.js"	
	const db = uniCloud.database(); // 连通数据库
	
	export default {
		data() {
			return {
				toolShow: false,
				headShow: false,
				boldShow:false,
				italicShow:false,
				artObj:{
					title:"",
					content:"",
					description:"",
					picurls:"",
					province:""
				}
			};
		},
		onLoad(){
			getProvince().then( res => {	
				console.log(res);
				this.artObj.province = res;
			})
		},
		methods: {
			//点击提交按钮
			onSubmit(){
				this.editorCtx.getContents({
					success:res=>{
						this.artObj.description=res.text.slice(0,80);// 预览列表页，存的时候就截取，性能高一点。
						this.artObj.content=res.html;
						this.artObj.picurls=getImgSrc(res.html)
						uni.showLoading({
							title:"发布中..."
						})				
						this.addBlogData();
					}
				})
			},
			// 向圈子博文数据表中添加数据
			addBlogData(){
				db.collection("blog_article").add({
					...this.artObj
				}).then(res=>{					
					uni.hideLoading();
					uni.showToast({
						title:"发布成功"
					})
					setTimeout(()=>{
						uni.reLaunch({
							url:"/pages/blog/blog"
						})
					},800)
				})
			},
			// 初始化
			onEditReady() {
				uni.createSelectorQuery().in(this).select('.myEdit').fields({
					size: true,
					context: true
				}, res => {
					this.editorCtx = res.context;
				}).exec()
			},
			checkStatus(name, detail, obj) {
				if (detail.hasOwnProperty(name)) {
					this[obj] = true;					
				} else {
					this[obj] = false;
				}
			},
			onStatusChange(e) {
				let detail=e.detail
				this.checkStatus("header",detail,"headShow");
				this.checkStatus("bold",detail,"boldShow");
				this.checkStatus("italic",detail,"italicShow");		
			},
			// 添加大标题
			clickHead() {
				this.headShow = !this.headShow;
				this.editorCtx.format("header", this.headShow ? 'H2' : false);
			},
			//加粗
			clickBold(){
				this.boldShow=!this.boldShow
				this.editorCtx.format("bold")
			},
			//设置倾斜
			clickItalic(){
				this.italicShow=!this.italicShow;
				this.editorCtx.format("italic")
			},
			// 添加分割线
			clickDivider() {
				this.editorCtx.insertDivider();
			},
			//上传图像
			clickInsertImage(){
				uni.chooseImage({					
					success:async res=>{
						uni.showLoading({
							title:"上传中请稍后",
							mask:true
						})
						for (let item of res.tempFiles) {
							let suffix = item.path.substring(item.path.lastIndexOf("."));
							let randomName=Date.now() + "" + String( Math.random() ).substr(3,6)+suffix
							
							let res= await uniCloud.uploadFile({
								filePath:item.path,
								cloudPath:item.name || randomName
							})
							this.editorCtx.insertImage({
								src:res.fileID
							})							
						}
						uni.hideLoading()
					}
				})
			},
			//点击工具条的确认
			addOk(){
				this.toolShow=	false;
			},
			// 离开焦点
			onFocus() {
				this.toolShow = true
			}
		}
	}
</script>

<style lang="scss" scope>
/deep/ .ql-blank::before{
	font-style: normal;
	color:#e0e0e0;
}
	
.add{
	padding:30rpx;
	.title{
		input{
			height: 120rpx;
			font-size: 46rpx;
			border-bottom:1px solid #e4e4e4;
			margin-bottom:30rpx;
			color:#000;
		}
		.placeholderClass{
			color:#e0e0e0;
		}
	}
	.content{
		.myEdit{
			height: calc(100vh - 500rpx);
			margin-bottom:30rpx;
		}		
	}
	.tools{
		width: 100%;
		height: 80rpx;
		background: #fff;
		border-top:1rpx solid #f4f4f4;
		position: fixed;
		left:0;
		bottom:0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.iconfont{
			font-size: 36rpx;
			color:#333;
			&.active{
				color:#0199FE
			}
		}
	}
}
</style>
